<!DOCTYPE html>
<html>

<head>

</head>

<body>
    <table cellspacing="0" rules="all" class="commTblStyle_8" border="1" id="ctl00_ContentPlaceHolder1_gvCargoState"
        style="width:100%;border-collapse:collapse;">
        <tbody>
            <tr>
                <th scope="col">Local Time <label id="currentTimeArea">(Local)</label><input id="ipLocalDt"
                        type="button" value="Convert Time Zone"
                        class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
                        style="display: none;"></th>
                <th scope="col">City</th>
                <th scope="col">FlightNo</th>
                <th scope="col"> Goods Status</th>
                <th scope="col">Piece</th>
                <th scope="col">Weight</th>
            </tr>
            <tr>
                <td align="center">
                    2020-07-30 02:16:00
                </td>
                <td align="center">
                    TORONTO PE
                </td>
                <td align="center">

                </td>
                <td align="center">
                    Air Waybill has been received.
                </td>
                <td align="center">

                </td>
                <td align="center">
                </td>
            </tr>
            <tr>
                <td align="center">
                    2020-07-30 02:16:00
                </td>
                <td align="center">
                    TORONTO PE
                </td>
                <td align="center">
                </td>
                <td align="center">
                    Cargo has been received.
                </td>
                <td align="center">
                    2
                </td>
                <td align="center">
                    585
                </td>
            </tr>
            <tr>
                <td align="center">
                    2020-07-31 07:35:21
                </td>
                <td align="center">
                    GUANGZHOU
                </td>
                <td align="center">

                </td>
                <td align="center">
                    Air Waybill has been received.
                </td>
                <td align="center">

                </td>
                <td align="center">


                </td>
            </tr>
            <tr>
                <td align="center">
                    2020-07-31 07:35:21
                </td>
                <td align="center">
                    GUANGZHOU
                </td>
                <td align="center">

                </td>
                <td align="center">
                    Cargo has been received.
                </td>
                <td align="center">
                    2
                </td>
                <td align="center">
                    585

                </td>
            </tr>
            <tr>
                <td align="center">
                    2020-07-31 09:26:23
                </td>
                <td align="center">
                    GUANGZHOU
                </td>
                <td align="center">

                </td>
                <td align="center">
                    Delivery notification has been issued.
                </td>
                <td align="center">

                </td>
                <td align="center">


                </td>
            </tr>
            <tr>
                <td align="center">
                    2020-07-31 16:48:00
                </td>
                <td align="center">
                    GUANGZHOU
                </td>
                <td align="center">

                </td>
                <td align="center">
                    Cargo has been picked up by kangqiao
                </td>
                <td align="center">
                    2
                </td>
                <td align="center">
                    585

                </td>
            </tr>
        </tbody>
    </table>

    <script src="../js/jquery.js"></script>
    <script>
        var table = $("table");
        // console.log(table);
        // var tbody = table.find("tbody")
        // console.log(table.find("tbody"));
        // console.log('~~~~~~~~~~~~~~~~');

        // var tr = tbody.find("tr")
        // console.log(tr[2]);
        // console.log(tr[0].children);
        // console.log('~~~~~~~~~~~~~~~~');

        // var th = tr[0].children
        // console.log(th);
        // console.log(th[0].innerText);
        // console.log(th[0].innerText);

        // console.log('~~~~~~~~~~~~~~~~');
        // var td = tr[1].children;
        // console.log(td);

        // console.log(typeof td[0]);
        // console.log('~~~~~~~~~~~~~~~~');



        // for(var i= 0,length=tr.length;i < length;i++){
        //     console.log(tr[i].find("td"));
        // }

        function tableToJson(table) {
            // 将表格数据保存為json数据
            var data = [];
            var tr = table.find("tbody").find("tr");

            // 表头名
            var title = [];
            var th = tr[0].children;
            for (var i = 0, length = th.length; i < length; i++) {
                // var text = String(th[i].innerText);
                // text.trim().replace(/\r\n/ig, '');
                // title.push(text)
                title.push(th[i].innerText)
            }

            for (var i = 1, length = tr.length; i < length; i++) {
                var addData = {};
                var td = tr[i].children;
                if (td.length == title.length) {
                    for (var j = 0; j < td.length; j++) {
                        addData[title[j]] = td[j].innerText
                    }
                    data.push(addData);
                    addData = {}
                } else {
                    console.log("表头和表体长度不一致~~")
                }
            }
            return data;
        }

        var datas = tableToJson(table);
        console.log(datas);

    </script>
</body>

</html>